//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
  Row,
  Col,
  Form,
  Input,
  Select,
  Button,
  Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;



//查看表单
@Form.create()
class ViewForm extends PureComponent {
  static defaultProps = {
    handleViewModalVisible: () => {},
    values: {},
  };

  constructor(props) {
    super(props);
    this.state = {
      formVals: {
        dept_id: props.values.dept_id,
        dept_name: props.values.dept_name,
        dept_code: props.values.dept_code,
        parent_id: props.values.parent_id,
        leaf: props.values.leaf,
        levelcode: props.values.levelcode,
        parent_name: props.values.parent_name,
      },
    };

  }



  renderContent = (formVals) => {
    const { form } = this.props;
    return (
      <Form  layout="vertical" hideRequiredMark>



                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col  md={12} sm={24}>
                    <FormItem  label="名称">
                        {form.getFieldDecorator('dept_name', {
                        rules: [{ required: true, message: '请输入至少五个字符的部门名称！', min: 5 }],
                        initialValue: formVals.dept_name,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>


										<Col  md={12} sm={24}>
		                    <FormItem  label="上级部门">
		                        {form.getFieldDecorator('parent_name', {
		                        initialValue: formVals.parent_name,
		                        })(<Input  readOnly placeholder="请输入" />)}
		                    </FormItem>
                    </Col>



                </Row>
			        	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
						       	<Col md={12} sm={24}>
								        <FormItem label="状态">
								            {form.getFieldDecorator('enable',{
								            	initialValue: formVals.enable,
								            })(
								                <Select placeholder="请选择" style={{ width: '100%' }}>
								                    <Option value="0">不可用</Option>
								                    <Option value="1">可用</Option>
								                </Select>
								            )}
								        </FormItem>
						        </Col>
										
						        <Col  md={12} sm={24}>
								        <FormItem  label="描述">
								            {form.getFieldDecorator('dept_description', {
								            rules: [{ required: false }],
								            initialValue: formVals.dept_description,
								            })(<Input readOnly placeholder="请输入" />)}
								        </FormItem>
						        </Col>
						
						    </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>


                    <Col  md={12} sm={24}>
                    <FormItem  label="父部门Id">
                        {form.getFieldDecorator('parent_id', {
                        rules: [{ required: true, message: '请输入至少五个字符的父部门Id！', min: 5 }],
                        initialValue: formVals.parent_id,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>

                    <Col  md={12} sm={24}>
                    <FormItem  label="层次码">
                        {form.getFieldDecorator('levelcode', {
                        rules: [{ required: true, message: '请输入至少五个字符的部门code！', min: 5 }],
                        initialValue: formVals.levelcode,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>

                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{display: 'none'}}>

										<Col  md={12} sm={24}>
		                    <FormItem  label="上级部门">
		                        {form.getFieldDecorator('parent_name', {
		                        initialValue: formVals.parent_name,
		                        })(<Input  readOnly placeholder="请输入" />)}
		                    </FormItem>
                    </Col>

                    <Col  md={12} sm={24}>
	                    <FormItem  label="是否叶子">
	                        {form.getFieldDecorator('leaf', {
	                        rules: [{ required: true, message: '请选择是否是叶子！', min: 1 }],
	                        initialValue: formVals.leaf,
	                        })(<Select placeholder="请选择" style={{ width: '100%' }}>
	                                <Option value="1">是</Option>
	                                <Option value="0">否</Option>
	                            </Select>)}
	                    </FormItem>
                    </Col>

                </Row>


    </Form>
    );

  };



  render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;

    return (
      <Modal
    width={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(values)}
</Modal>
    );
  }

}

export default ViewForm;
